<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-category-header">
      <span class="text">最热文章</span>
    </div>

    <ul class="me-category-list">
      <li
        class="me-category-item text"
        v-for="(blog, index) in hotblog"
        :key="index"
      >
        <router-link :to="{ name: 'BlogDetail', params: { blogId: blog.id } }">
          <p @click="changeBlog(blog.id)" class="info">
            {{ blog.title }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
            <i class="el-icon-view"></i> &nbsp;&nbsp;
            {{ blog.viewCounts }} &nbsp;&nbsp;&nbsp;&nbsp;|
            {{ blog.createDate }}
          </p>
        </router-link>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  name: 'CardCategory',
  data() {
    return {
      hotblog: {},
    }
  },
  methods: {
    gethotBlog() {
      const _this = this
      this.$axios.get('/articles/hot').then((res) => {
        _this.hotblog = res.data.data.list
        _this.hotblog.forEach((item, i) => {
          if (item.id == 1) {
            _this.mycontext = item
            _this.hotblog.splice(i, 1)
          }
        })
      })
    },
    changeBlog(id) {
      window.location.href = '/blog/' + id
    },
  },
  created() {
    this.gethotBlog()
  },
}
</script>

<style scoped>
.me-category-header {
  font-weight: 600;
}

.me-category-list {
  overflow: hidden;
  list-style-type: none;
}

.me-category-item {
  padding: 4px;
  font-size: 14px;
  color: #5fb878 !important;
}
.info {
  height: 30px;
  text-align: center;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #5fb878 !important;
}
.me-category-item a:hover {
  text-decoration: underline;
}
.text {
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
